<template>
	<view class="page flex-col">

		<view class="group_1 flex-col">
			<view class="block_13 flex-row">
				<!-- <image class="image_3" src="../../static/logo.png" mode=""></image> -->
				<image class="image_3" :src="dataInfo.image" mode=""></image>

				<view class="group_4 flex-col" style="justify-content: space-around;">
					<view class="box_6  flex-row justify-between">
						<view class="text_18 line2">{{dataInfo.hotelName}}</view>
						<!-- <div class="block_14 flex-col"></div> -->
					</view>

					<view class=" flex-row">
						<view class="image-text_1 flex-row ">
							<image class="label_1" src="@/static/pagesA/icon_dw.png" mode=""></image>
							<!-- <text class="text-group_1">地址:</text> -->
						</view>
						<view class="flex-row" style=" align-items: center;" @click="openLocation()">
							<view class="text_12">{{dataInfo.address}}</view>
							<image class="label_15" src="@/static/pagesA/icon_dh.png" mode=""></image>
						</view>

					</view>
				</view>
				<!-- <view class="text-wrapper_8 flex-col">
						
					</view> -->
			</view>
			<view class="block_12 ">
				<view @click="onShowDatePicker('range')">
					{{range[0]}} <text class="rzatag">入住</text> - {{range[1]}} <text class="rzatag">离店</text>
					<text style=" color: #46B681;padding-left: 20rpx;">共{{totolDay}}晚</text>
				</view>
				<view class="" style="margin-top: 20rpx;" v-if="false">
					<text>共{{totolDay}}晚</text>
				</view>
				<view class="">
					<mx-date-picker :show="showPicker" :type="type" :value="value" :show-tips="true" :begin-text="'入住'"
						:end-text="'离店'" :show-seconds="true" @confirm="ed" @cancel="ed" />

				</view>


			</view>
			<view class=" flex-col listWrap">
				<view class="list-name">入住信息</view>
				<view class="list dis">
					<view class="list-img">
						<image src="@/static/pagesA/icon_zbf.png" mode=""></image>
					</view>
					<view class="list-inp">
						<input v-model="form.name" type="text" placeholder="请输入联系人" />
					</view>


				</view>
				<view class="list dis">
					<view class="list-img">

						<image src="@/static/com/icon_lxfs.png" mode=""></image>

					</view>
					<view class="list-inp">
						<input type="number" v-model="form.phone" placeholder="请输入联系电话" />
					</view>

				</view>
			</view>



			<view class="footer dis">
				<view class="">
					<view>合计：
						<text style="color: $maincolor;">￥{{allprice||0}}</text>
					</view>
					<view>会员优惠：
						<text style="color: $maincolor;">￥{{priceData.vipDiscountFee||0}}</text>
					</view>
					<view>优惠券优惠：
						<text style="color: $maincolor;">￥{{priceData.couponFe||0}}</text>
					</view>
				</view>
				<view class="footer-btn" @click="submit">
					立即支付
				</view>

			</view>
		</view>
		<uni-popup ref="lookMorePup" type="bottom">
			<view class="safeguardPup-wrap">

				<view class="safeguardPup-head safeguardPup-head1 dis">
					<view class="">

					</view>
					<view class="safeguardPup-head-center"></view>
					<view class="safeguardPup-head-right">
						<image src="@/static/com/icon_close.png" mode=""></image>
					</view>
				</view>
				<view class="safeguardPup-msg ">
					<view class="group_7 flex-row" v-for="(item,index) in 3">
						<text class="text_33">基础</text>
						<view class="dis" style="flex-wrap: wrap;">
							<view class="image-text_2 flex-row justify-between" v-for="(item,index) in 70">
								<image class="label_2" src="../../pages/columnGoods/static/group02.gif" mode=""></image>

								<text class="text-group_2">无线网</text>
							</view>

						</view>


					</view>
				</view>

			</view>

		</uni-popup>
		<payment :payMode='payMode' :pay_close="pay_close" :types="scene" @onChangeFun='onChangeFun' :order_id="orderNo"
			:totalPrice='allPrice'></payment>
			<home></home>
	</view>
</template>
<script>
	import home from '@/components/home/index.vue'
	import {

		getUserInfo,

	} from "@/api/user";
	import payment from '@/components/payment/index.vue'
	import {
		getApplyHotelRoomInfo,
		getApplyHotelComputedPrice,
		getApplyHotelInfo,
		getApplyHotelOrderCreate
	} from '@/api/togeterRich/index.js'
	import moment from 'moment'
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	export default {

		components: {
			home,
			MxDatePicker,
			payment
		},
		data() {
			return {

				orderNo: '',
				scene: '',
				pay_close: false,
				payMode: [{
						name: "微信支付",
						icon: "icon-weixinzhifu",
						value: 'weixin',
						title: '微信快捷支付'
					},
					{
						name: "余额支付",
						icon: "icon-yuezhifu",
						value: 'yue',
						title: '可用余额:',
						number: 0
					}
				],
				priceData: {},
				dataInfo: {},
				form: {
					phone: '',
					name: ''
				},
				roomMsg: {},
				totolDay: '',
				rid: '',
				sid: '',
				preOrderNo: '',



				allprice: 0,
				showPicker: false,

				range: [],

				type: 'rangetime',
				value: '',
				constants: {

				},
			};
		},
		onLoad(e) {
			// var str="Welcome to here ！";
			// var n=str.split("");
			// console.log(n);
			if (e.range) {
				this.range = e.range.split(",")
			}
			this.preOrderNo = e.preOrderNo
			this.rid = e.rid
			this.sid = e.id
			this.totolDate()
			this.init()
			this.price()
			console.log(e, 'eee')
		},
		methods: {
			init() {
				getUserInfo().then(res => {
					this.payMode[1].number = res.data.nowMoney

				})
				getApplyHotelRoomInfo(this.rid).then(res => {
					this.roomMsg = res.data
					this.allprice = res.data.price

				})
				getApplyHotelInfo(this.sid).then(res => {
					console.log(res, 'kjkk')
					this.dataInfo = res.data
				})
			},
			totolDate() {
				const start = moment(this.range[0]);
				const end = moment(this.range[1]);
				const days = end.diff(start, 'days');
				// totolDate
				this.totolDay = days
				console.log(days, '几天能算出来？')
			},
			submit() {
				console.log(this.form)
				if (this.form.name == '') {
					this.showYs("入住人不能为空")
					return;
				}
				if (this.form.phone == '') {
					this.showYs("入住人电话不能为空")

					return;
				}
				let data = {
					payChannel: 'routine',
					payType: "yue",
					preOrderNo: this.preOrderNo,
					shippingType: 2,
					realName: this.form.name,
					phone: this.form.phone,
					userCheckinTime: this.range[0],
					userCheckoutTime: this.range[1],
					useIntegral: false
				}
				getApplyHotelOrderCreate(data).then(res => {
					console.log(res, 'ddd')
					this.orderNo = res.data.orderNo
					this.scene = res.data.scene


					this.goPay()
				})
				return;






			},
			payClose: function() {
				this.pay_close = false;
			},
			goPay(pay_price, order_id) {
				this.$set(this, 'pay_close', true);
				this.$set(this, 'pay_order_id', order_id);
				this.$set(this, 'totalPrice', pay_price);

			},
			onChangeFun(e) {
				if (e.data == true) {
					uni.showModal({
						title: '支付成功',
						content: '支付成功',
						cancelText: "返回首页", // 取消按钮的文字  
						confirmText: "查看订单", // 确认按钮的文字  
						showCancel: true, // 是否显示取消按钮，默认为 true
						confirmColor: '#f55850',
						cancelColor: '#39B54A',
						success: (res) => {
							if (res.confirm) {
								uni.reLaunch({

									url: '/pagesB/hotole/index?status=10'
								});
							} else {
								uni.reLaunch({
									url: '/pages/index/index'
								});
								console.log('cancel') //点击取消之后执行的代码
							}
						}
					})
				}
				this.$set(this, 'pay_close', false);

			},
			lookMore() {
				this.$refs.lookMorePup.open()
			},
			call() {
				uni.makePhoneCall({
					phoneNumber: '114' //仅为示例
				});
			},
			openLocation() {

				uni.openLocation({
					latitude: Number(this.dataInfo.latitude), // 目标纬度
					longitude: Number(this.dataInfo.longitude), // 目标经度
					name: this.dataInfo.address,
					address: this.dataInfo.address,
					success: function() {
						console.log('打开地图导航成功');
					},
					fail: function(err) {
						console.log('打开地图导航失败', err);
					}
				});
			},
			onShowDatePicker(type) { //显示
				this.type = type;
				this.showPicker = true;
				this.value = this[type];
			},
			price() {
				let data = {
					preOrderNo: this.preOrderNo,
					productNum: this.totolDay,
					userCheckinTime: this.range[0],
					userCheckoutTime: this.range[1],
				}
				getApplyHotelComputedPrice(data).then(res => {
					console.log(res, 'reee')
					this.priceData = res.data
					this.allprice = this.priceData.payFee
				})
			},
			ed(e) { //选择
				this.showPicker = false;


				if (e) {
					this[this.type] = e.value;
					this.totolDate()
				}
				this.price()

			},
			showYs(tot) {
				uni.showToast({
					title: tot,
					icon: 'none'

				})
			}

		},
	};
</script>
<style lang="scss" scoped>
	.list {


		height: 100rpx;
		display: flex;

		align-items: center;

		.list-inp {
			input {
				padding: 30rpx;
			}
		}

		.list-img {
			width: 44rpx;
			height: 44rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

	}

	.listWrap {
		padding: 30rpx;
		width: 100%;
		background: #fff;
		margin: 20rpx 0;

		.list-name {
			font-size: 28rpx;
			color: #333;
		}
	}

	.footer {
		width: 100%;
		position: fixed;
		bottom: 0;
		background: #fff;
		z-index: 1;
		padding: 30rpx;
		align-items: center;
		justify-content: space-between;

		.footer-btn {

			font-size: 28rpx;
			line-height: 80rpx;
			border-radius: 100rpx;
			background: $maincolor;
			text-align: center;
			color: #fff;
			padding: 0 100rpx;
		}
	}

	.safeguardPup-wrap {
		.safeguardPup-head1 {
			justify-content: space-between;
			padding: 36rpx 36rpx 0 36rpx;

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.safeguardPup-msg {
			width: 90%;
			margin: 30rpx auto;
			justify-content: space-between;
			font-size: 28rpx;
			flex-direction: column;
			text-align: center;
		}

		width: 100%;
		height: 600rpx;
		background: #fff;
		border-radius: 20rpx;
		overflow-y: scroll;
	}

	.swiper {
		width: 100%;
		height: 100%;

		image {
			width: 100%;
			height: 100%;
		}
	}

	@import '@/pagesA/BeautifulEconomy/com/homstaypay.css';

	@import '@/com/css/common.css';
</style>